<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<pre>
			路由跳转：this.$router.push(config)
			1.config为字符串： this.$router.push('/home/123')  对应路由配置： '/home/:id'
			2.config为对象：则为params或query，路由配置不加后缀
			
			$router和$route区别:
			1.$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
			2.$route为当前router跳转对象，里面可以获取name、path、query、params等
			
			query和params传参的区别
			query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示
		</pre>
		<div id="app">
			<App />
		</div>
		
		<script src="../node_modules/vue/dist/vue.js"></script>
		<script src="../node_modules/vue-router/dist/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let Home = {
				template: '<p>home组件</p>',
				mounted(){
					//获取的homeId为字符串，如Number类型转化为String
					console.log(this.$route.params.homeId)
				},
			}
			let Menu = {
				template: '<p>menu组件</p>',
				mounted(){
					//保留参数源格式  如Number类型
					console.log(this.$route.params.menuId)
				},
			}
			let Content = {
				template: '<p>content组件</p>',
				mounted(){
					console.log(this.$route.query.contentId)
				},
			}
			let router = new VueRouter({
				routes: [{
					path: '/home/:homeId',
					name: 'home',
					component: Home
				},{
					path: '/menu',
					name: 'menu',
					component: Menu
				},{
					path: '/content',
					name: 'content',
					component: Content
				}]
			})
			
			let App = {
				template:`
				<div>
					<button @click="stringRouter">手动点击跳转字符串</button>
					<button @click="paramRouter">手动点击跳转params</button>
					<button @click="queryRouter">手动点击跳转query</button>
					<router-view></router-view>
				</div>
				`,
				methods:{
					//param传参
					paramRouter(){
						//this.$router.push('/menu/1234')
						//虽然地址栏看不到参数值，但是在组件里面可以打印出来该参数,该方法刷新浏览器后获取不到
						//注意：params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！
						this.$router.push({name: 'menu', params: {menuId: 'menu123'}})
					},
					//query传参
					queryRouter(){
						//地址栏可看到参数值，在组件里面也可以打印出来该参数，刷新浏览器依然可获取到
						//以下方法完全一样
						this.$router.push({name: 'content', query: {contentId: 'zqf123'}})
						//this.$router.push({path: '/content', query: {contentId: 'zqf123'}})
						
					},
					stringRouter(){
						//地址栏可看到参数值，在组件里面也可以打印出来该参数，刷新浏览器依然可获取到
						this.$router.push('/home/zqf666')
					}
				},
			}
			let vm = new Vue({
				el: '#app',
				components: {App},
				router,
				data(){
					return {
						name: 'zqf'
					}
				},
			})
		</script>
	</body>
</html>
